import VuePropTypes from 'ant-design-vue/es/_util/vue-types'
import { FormModel, Input, Select, Switch, InputNumber, Row, Col, TreeSelect, Tree, Radio, DatePicker, AutoComplete } from 'ant-design-vue'

const FormModelItem = FormModel.Item

const CustomFormProps = {
  formData: VuePropTypes.any,
  columns: VuePropTypes.array,
  formProps: VuePropTypes.any,
  colSpan: VuePropTypes.number.def(24),
  formRef: VuePropTypes.any
}

const CustomFormItemProps = {
  formData: VuePropTypes.any,
  field: VuePropTypes.string,
  fieldProps: VuePropTypes.any,
  type: VuePropTypes.string,
  title: VuePropTypes.string,
  formItemProps: VuePropTypes.any,
  hidden: VuePropTypes.bool.def(false)
}

const CustomFormItem = {
  name: 'CustomFormItem',
  props: CustomFormItemProps,
  render () {
    let content
    if (this.type === 'switch') {
      content = <Switch v-model={this.formData[this.field]} {...{ props: { ...this.fieldProps } }} />
    } else if (this.type === 'treeSelect') {
      console.log(this.fieldProps)
      content = <TreeSelect v-model={this.formData[this.field]} {...{ props: { ...this.fieldProps } }} />
    } else if (this.type === 'inputNumber') {
      content = <InputNumber v-model={this.formData[this.field]} {...{ props: { ...this.fieldProps } }} />
    } else if (this.type === 'select') {
      content = <Select v-model={this.formData[this.field]} {...{ props: { ...this.fieldProps } }} />
    } else if (this.type === 'tree') {
      content = <Tree v-model={this.formData[this.field]} {...{ props: { ...this.fieldProps } }} />
    } else if (this.type === 'radioGroup') {
      content = <Radio.Group v-model={this.formData[this.field]} {...{ props: { ...this.fieldProps } }} />
    } else if (this.type === 'datePicker') {
      content = <DatePicker v-model={this.formData[this.field]} {...{ props: { ...this.fieldProps } }} />
    } else if (this.type === 'autoComplete') {
      content = <AutoComplete v-model={this.formData[this.field]} {...{ props: { ...this.fieldProps } }} />
    } else {
      content = <Input v-model={this.formData[this.field]} {...{ props: { ...this.fieldProps } }} />
    }

    return (<FormModelItem
      label={this.title}
      prop={this.field}
      {...{ props: this.formItemProps }}
    >
      {content}
    </FormModelItem>)
  }
}

const CustomForm = {
  name: 'CustomForm',
  props: CustomFormProps,
  methods: {
    validate (callback) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          callback()
        } else {
          return false
        }
      })
    },
    resetFields () {
      this.$refs.form.resetFields()
    }
  },
  render () {
    return <FormModel
      ref="form"
      {...{
        props: {
          model: this.$props.formData,
          ...this.$props.formProps
        }
      }}
    >
      <Row>
      {
        this.columns.map((item) => {
          if (item.hidden) return null
          return <Col span={this.colSpan}>
            <CustomFormItem
              title={item.title}
              type={item.type}
              field={item.field}
              fieldProps={item.fieldProps || {}}
              formData={this.$props.formData}
              formItemProps={item.formItemProps || {}}
            />
          </Col>
        })
      }
      </Row>
    </FormModel>
  }
}

CustomForm.Item = CustomFormItem

export default CustomForm
